<template>
  <div class="person">
    <!-- 14 生命周期 -->
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="add">点击加一</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated , onBeforeUnmount, onUnmounted} from 'vue'

let sum = ref(0)
const add = () => {
  sum.value += 1
}

// 创建 beforeCreate created setup
console.log('创建')

// 挂载
onBeforeMount(()=>{
  // v3在挂载前帮 调用 onBeforeMount() 里面的函数 () => {}
  console.log('挂载前')
})

onMounted(()=>{
  console.log('2222222挂载完毕')
})

// 更新
onBeforeUpdate(()=>{
  console.log('更新前')
})

onUpdated(()=>{
  console.log('更新完毕')
})

// 卸载
onBeforeUnmount(()=>{
  console.log('卸载前')
})

onUnmounted(()=>{
  console.log('卸载完毕')
})



</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>